<!-- 明星学员 -->
<template>
			<!--瀑布流布局start-->
				<view class="new-list" >
					<view class="list-left" id="left1"  >
						<view class="card" @click="toDetail(item.id,'student',item.clubId)" v-for="(item,index) in cardListLeft" :key="index">
							<view class="imgwrap" :style="{width:'100%',maxHeight:'500rpx'}">
								<image class="img" :src="item.starImg" alt="" style="width:100%;" mode="widthFix" @load="loadImg()" @error="loadImg()" >
							</view>
							<view class="card-text">
								<view class="headTop">
									<h2 class="line-clamp-2">{{item.desc}}</h2>
								</view>
								<view>
									<view class="classTop" @click.stop="toDetail(item.id,'club',item.clubId)">
										<view class="icon">
											<image :src="item.clubIcon" alt="" style="width:100%">
										</view>
										<text class="line-clamp-1">{{item.clubName}}</text>
									</view>
								</view>
							</view>
						</view>
					</view>
					<view class="list-right" id="right1" >
						<view class="card" @click="toDetail(item.id,'student',item.clubId)" v-for="(item,index) in cardListRight" :key="index">
							<view class="imgwrap" :style="{width:'100%',maxHeight:'500rpx'}">
								<image class="img" :src="item.starImg" alt="" style="width:100%;" mode="widthFix" @load="loadImg()" @error="loadImg()">
							</view>
							<view class="card-text">
								<view class="headTop">
									<h2 class="line-clamp-2">{{item.desc}}</h2>
								</view>
								<view>
									<view class="classTop" @click.stop="toDetail(item.id,'club',item.clubId)">
										<view class="icon">
											<image :src="item.clubIcon" alt="" style="width:100%">
										</view>
										<text class="line-clamp-1">{{item.clubName}}</text>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<!--瀑布流布局end-->
</template>

<script>
	import { mapState, mapGetters, mapMutations } from 'vuex'
	let leftHeight = 0, rightHeight = 0, currentList =[];
	let query;
	export default {
		name:'XjxWaterfallList',
		props:[
			'studentType',
			'allListData'
		],
		data() {
			return {
				list: [],
				classTypeValue: [],
				usedClassTypeValue: [],
				coachTypeValue: [],
				usedCoachTypeValue: [],
				cardListLeft:[],		//用来储存左栏的card
				cardListRight:[],		//用来储存右栏的card
				rImgH:0,				//实际载入的card的高度
				contentH:800,			//设置客户端的屏幕高度默认值
				loadMoreTemp:1,			//作为scoll滚动触底，加载更多的标记，防止多次出发事件，1为允许，0为阻止
				showNoMore:false,		//控制底部“我也是有底线view的显示”
				oldScrollTop: 0,
				pageSize:5,
				pageNum:0,
				pageNo:1,
				pageLoaded: false,
				listFlag: false,
				// 输入完成后重置数据
        isReload: false,
        loadNum: 1
			};
		},
		computed: {
			...mapState(['userInfo','accessToken','coachValue']),
		},
		mounted(){
			currentList = this.allListData
      if (currentList.length) {
        this.cardListLeft.push(currentList[0])
      }
		},
    methods:{
      async loadImg() {
        const length = currentList.length
				query = wx.createSelectorQuery().in(this)
				const {cardListLeft,cardListRight} = this.$data
        await	this.getBoxHeight(cardListLeft,cardListRight);
        if (this.loadNum < length) {
        	if(leftHeight <= rightHeight){
							cardListLeft.push(currentList[this.loadNum])
              this.loadNum+=1
							// _this.cardListLeft = cardListLeft;
						}else{ 
							cardListRight.push(currentList[this.loadNum])
              this.loadNum+=1
							// _this.cardListRight = cardListRight;
						}
        }else{
					this.$emit('endShow')
				}
      },
			async isLeft(goods) {
				let _this = this
				const {cardListLeft,cardListRight} = this.$data
				let list = goods
				query = wx.createSelectorQuery().in(this)
				for (const item of list) {
					if(leftHeight <= rightHeight){
							cardListLeft.push(item)
						}else{
							cardListRight.push(item)
						}
					await	this.getBoxHeight(cardListLeft,cardListRight);
				}
				
			},
			getBoxHeight(cardListLeft,cardListRight) { //获取左右两边高度
				let _this = this
					_this.cardListLeft = cardListLeft;
					_this.cardListRight = cardListRight;
						return new Promise((resolve, reject) => {
						// this.$nextTick(() => {
							query.select('#left1').boundingClientRect();
							query.select('#right1').boundingClientRect();
							query.exec((res) => {
								if (res[0] ){
									leftHeight = res[0].height; //获取左边列表的高度
									rightHeight = res[1].height; //获取右边列表的高度
									resolve();
								}
							})
							// });
						})
			},
			to(url){
				uni.navigateTo({
					url: url
				})
			},
      toDetail(id,text,clubId){
				 this.$emit('todetail',id,text,clubId)
			}
	 },
	 watch:{
		 allListData(newValue, oldValue){
			 if(newValue){
        if (newValue.length) {
          currentList = [...currentList,...newValue]
          this.loadImg()
        }
			 }
		 }
	 }
	}
</script>

<style scoped lang="scss">
		.new-list{
			padding:0 20rpx 30rpx;
			overflow: hidden;
			width:750rpx;
			.list-left,.list-right{
				width: 345rpx;
				// padding: 15rpx;
				float:left;
				.imgwrap{
					width:345rpx;
					max-height:500rpx;
					overflow: hidden;
				}
				.img{
					width:345rpx;
					height:100%;
					
				}
				.card-text{
					padding: 20rpx 20rpx 20rpx;
				}
				.headTop{
					display: flex;
					justify-content: space-between;
					h2{
						font-size:30rpx;
						margin-bottom: 15rpx;
						display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 2;
						overflow: hidden;
						word-break: break-all;
					}
					.right{
						line-height:60rpx;
						display:flex;
					}
					.rate-text{
						font-size:28rpx;
						color:#FDD549;
						display: block;
						margin-left:10rpx;
					}
				}
				.jlb{
					font-size:24rpx;
					color:#999;
					line-height:30rpx;
					margin:5rpx 0 10rpx;
				}
				.classTop{
					display: flex;
					// padding-top:30rpx;
					// margin-bottom:15rpx;
					.icon{
						margin-right:10rpx;
						width:38rpx;
						height:38rpx;
						border-radius: 38rpx;
						overflow: hidden;
						flex: 0 0 auto;
						image{
							width:100%;
							height:100%;
						}
					}
					text{
						font-size: 26rpx;
						color:#999;
					}
				}
				.classbtn{
					widows: 295rpx;
					height:50rpx;
					background-color:#FFF9E3;
					color:#FEB115;
					font-size:26rpx;
					text-align: center;
					line-height: 50rpx;
					border-radius: 50rpx;
				}
				.card{
					overflow: hidden;
					border-radius: 15rpx;
					margin: 20rpx 0;
					background: #FFFFFF;
					
				}
			}
			.list-right{
				margin-left:20rpx;
			}

		}
		 .list-loading {
      width: 750rpx;
      display: flex;
      justify-content: center;
      position: relative;
      padding-top: 200rpx;
    }
    .scroll-bottom {
      line-height: 30rpx;
      color: #cccccc;
      text-align: center;
      font-size: 24rpx;
      height: 50rpx;
      text {
        color: #cccccc;
        font-size: 24rpx;
      }
    }
		.list{
			padding-bottom: 15rpx;
			.list-item{
				overflow: hidden;
				.main-info{
					align-items: center;
					padding: 30rpx 20rpx;
					.info-left{
						width: 122rpx;
						height: 122rpx;
						position: relative;
						padding: 2rpx;
						margin-right: 15rpx;
						border: 4rpx solid $public-color-yellow1;
						border-radius: 50%;
						.coach-icon{
							width: 110rpx;
							height: 110rpx;
							vertical-align: middle;
							border-radius: 50%;
						}
						.gold-icon{
							width: 48rpx;
							height: 48rpx;
							position: absolute;
							right: -10rpx;
							top: -10rpx;
						}
					}
					.info-right{
						flex: 1 0 auto;
						.title-row{
							align-items: center;
							.coach-name{
								font-size: 34rpx;
								line-height: 34rpx;
							}
							.coach-tag{
								color: #EF866A;
								height: 32rpx;
								line-height: 28rpx;
								font-size: 24rpx;
								padding: 0 10rpx;
								border: 2rpx solid rgba(247,115,80,.2);
								border-radius: 5rpx;
							}
						}
						.content-row{
							font-size: 26rpx;
							color: $text-color-grey;
							align-items: center;
							display: flex;
							flex-flow: row nowrap;
							.rate-text{
								color: #FDD549;
								margin-left: 10rpx;
							}
						}
					}
				}
				.course-row{
					width: 100%;
					box-sizing: border-box;
					background-color: #FEF5E5;
					height: 80rpx;
					align-items: center;
					font-size: 24rpx;
					padding: 0 20rpx;
					margin-top: -10rpx;
					.tag-item{
						background-color: $public-color-yellow1;
						color: $text-color-white1;
						border-radius: 5rpx;
						margin-right: 10rpx;
						flex: 0 0 auto;
						padding: 0 10rpx;
						line-height: 32rpx;
						font-size: 24rpx;
					}
					.course-title{
						margin: 0 20rpx 0 10rpx;
						flex: 1 1 auto;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
						font-size: 26rpx;
						color: $text-color-dark-grey;
						text-align: left;
					}
					.price{
						font-size: 24rpx;
						color: $public-color-yellow1;
						text{
							font-size: 30rpx;
						}
					}
				}
			}
		}
	
</style>

